<template>
	<view class="formBox">
		<!-- 表单结构，数据绑定 -->
		<u--form labelPosition="left" :model="model" :rules="rules" ref="form1">
			<view style="background-color: #FFFFFF; padding: 0 20px;margin: 10px 0;">
				<u-form-item label="投放人群年龄" labelWidth="220rpx" prop="info.age" @click="showAge = true;hideKeyboard()"
					borderBottom ref="item1">
					<u--input v-model="model.info.age" disabled disabledColor="#ffffff" placeholder="请选择年龄段"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="性别" prop="info.sex" labelWidth='235rpx' @click="showSex = true;hideKeyboard()"
					ref="item1">
					<u--input v-model="model.info.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</view>
			<view style="background-color: #FFFFFF; padding: 0 20px;margin: 10px 0;">
				<u-form-item label="人群区域" labelWidth="260rpx" @tap="toOpen" borderBottom ref="item1">
					<u--input v-model="model.info.address.length===34 ? '全国' : model.info.address" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="投放日期" labelWidth="80" prop="info.time" borderBottom ref="item1">
					<view class="example-body">
						<uni-datetime-picker type="daterange" v-model="model.info.range" rangeSeparator="至">
						</uni-datetime-picker>
					</view>
				</u-form-item>
				<u-form-item label="投放数量" labelWidth="240" prop="info.num" ref="item1">
					<u--input v-model="model.info.num" border="none" placeholder="请输入投放数"></u--input>
				</u-form-item>
			</view>

			<view style="background-color: #FFFFFF; padding: 0 20px;margin: 10px 0;">
				<u-form-item label="项目资料" labelWidth="80" prop="project" ref="item1">
					<u-upload :form-data="model" :action="action" :auto-upload="false" :file-list="fileList" multiple
						:max-count="1" width="200" height="100" v-if="fileList.length !== undefined">
						<image src="@/static/icon/upload.svg" mode="widthFix"
							style="width: 100rpx;height: 100rpx; display: inline-block;"></image>
					</u-upload>
					<text v-else>资料已上传</text>
				</u-form-item>
			</view>


		</u--form>
		<!-- 按钮提交 -->
		<button class="min-btn" type="primary" @click="submit">提交</button>
		<button class="min-btn" type="warn" @click="reset" style="margin-top: 15rpx;">重置</button>
		<!-- 底层选项配置 -->
		<u-action-sheet :show="showSex" :actions="Sexactions" title="请选择性别" @close="showSex = false" @select="sexSelect"
			@change="change">
		</u-action-sheet>
		<u-action-sheet :show="showAge" :actions="Ageactions" title="请选择年龄段" @close="showAge = false"
			@select="ageSelect" @change="change">
		</u-action-sheet>
		<!-- 地址选择器 -->
		<jpSelect ref="jpSelect" :list="Addressactions" @checked="checked" :item="item" select="more" tite="请选择投放的区域" checkAll="false"></jpSelect>
	</view>

</template>

<script>
	import jpSelect from '@/components/jp-select/jp-select.vue';
	export default {
		components: {
			jpSelect
		},
		data() {
			return {
				// formData: {
				// 	name: '',
				// 	value:'',
				// },

				visible: false, //地址选择框是否出现s
				str: '',
				defaultValue: '',
				// sex:[{"value": 0,"text": "男"},{"value": 1,"text": "女"}],
				showSex: false,
				showAge: false,
				showAddress: false,
				action: '', //上传文件url
				fileList: [],
				model: {
					info: {
						age: '', //年龄段
						sex: '', //行性别
						address: '', //人群区域
						range: '', //日期
						num: '', //投放数量
						supplement: '',
					},
				},
				Sexactions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '全部',
					},
				],
				Ageactions: [{
						name: '未成年',
					},
					{
						name: '18岁至25岁',
					},
					{
						name: '26岁至30岁',
					},
					{
						name: '30岁至35岁',
					},
					{
						name: '35岁至45岁',
					},
				],
				Addressactions: [
					{
						name: '北京',
					},
					{
						name: '天津',
					},
					{
						name: '上海',
					},
					{
						name: '深圳',
					},
					{
						name: '河北省',
					},
					{
						name: '山西省',
					},
					{
						name: '辽宁省',
					},
					{
						name: '吉林省',
					},
					{
						name: '黑龙江省',
					},
					{
						name: '江苏省',
					},
					{
						name: '浙江省',
					},
					{
						name: '安徽省',
					},
					{
						name: '福建省',
					},
					{
						name: '江西省',
					},
					{
						name: '山东省',
					},
					{
						name: '河南省',
					},
					{
						name: '湖北省',
					},
					{
						name: '湖南省',
					},
					{
						name: '广东省',
					},
					{
						name: '海南省',
					},
					{
						name: '四川省',
					},
					{
						name: '贵州省',
					},
					{
						name: '云南省',
					},
					{
						name: '陕西省',
					},
					{
						name: '甘肃省',
					},
					{
						name: '青海省',
					},
					{
						name: '台湾省',
					},
					{
						name: '内蒙古自治区',
					},
					{
						name: '广西壮族自治区',
					},
					{
						name: '西藏自治区',
					},
					{
						name: '宁夏回族自治区',
					},
					{
						name: '新疆维吾尔自治区',
					},
					{
						name: '香港特别行政区',
					},
					{
						name: '澳门特别行政区',
					}
				],
				//定制每个选项的规则，与prop属性名一致
				rules: {
					'info.age': {
						type: 'string',

						required: true,
						message: '请选择年龄人群',
						trigger: ['blur', 'change'],
					},
					'info.sex': {
						type: 'string',
						max: 3,
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					},
					'info.address': {
						type: 'string',
						required: true,
						message: '请选择人群区域',
						trigger: ['blur', 'change'],
					},
					'info.range': {
						type: 'string',
						required: true,
						message: '请选择投放日期',
						trigger: ['blur', 'change'],
					},
					'info.num': {
						type: 'number',
						max: 5,
						required: true,
						message: '请选择年龄人群',
						trigger: ['blur', 'change'],
					},
				},

			}
		},
		watch: {
			range(newval) {
				console.log('范围选:', this.range);
			}
		},
		mounted() {
			setTimeout(() => {
				this.datetimesingle = "2021-5-1";
				this.single = "2021-5-1";
			}, 1000);
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			
			//选择地址
			checked(el) {
				var str=''
				el.forEach(function(e){
					str += e.name+'、'
				});
				str = str.substring(0, str.length-1);
				console.log(str)
				this.model.info.address=str
				// this.model.info.address=(JSON.stringify(temp))
			
			},
			toOpen() {
				this.$refs.jpSelect.toOpen()
				console.log(this.Addressactions.length)
			},
			//上传方法
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = wx.uploadFile({
						url: '', //接口
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					})
				})
			},
			//地址选择器
		
			cancel() {
				this.visible = false
			},
			sexSelect(e) {
				this.model.info.sex = e.name
				this.$refs.form1.validateField('info.sex')
			},
			ageSelect(e) {
				this.model.info.age = e.name
				this.$refs.form1.validateField('info.age')
			},

			hideKeyboard() {
				uni.hideKeyboard()
			},
			/**
			 * 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
			 * @param {String} name 字段名称
			 * @param {String} value 表单域的值
			 */
			// binddata(name,value){
			// 通过 input 事件设置表单指定 name 的值
			//   this.$refs.form.setValue(name, value)
			// },
			// 触发提交表单
			submit() {

				if (this.model.info !== '' && this.model.info) {
					uni.navigateTo({
						url: '../buy/buy?list=' + (JSON.stringify(this.model.info))
					})
				}

			},
			reset() {
				const validateList = ['info.name', 'info.sex', 'info.add', 'info.time', 'info.num',
					'info.project', 'info.supplement'
				]
				this.$refs.form1.resetFields()
				this.$refs.form1.clearValidate()
				setTimeout(() => {
					this.$refs.form1.clearValidate(validateList)
					// 或者使用 this.$refs.form1.clearValidate()
				}, 10)
			},
		}
	}
</script>

<style lang="stylus">
	.openAdd {
		display: inline-block;
		font-weight: 600;
	}

	.u-form-item {

		font-weight: 600;
	}

	.min-btn {
		margin 40px 40px;
	}
</style>
